<template>
  <div>
    <a-button v-if="displayType === 'BUTTON'" type="primary" @click="showConfirm">{{ text }}</a-button>
    <a v-if="displayType === 'LINK'" @click="showConfirm">{{ text }}</a>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    callback: { type: [Function] },
    rows: { type: [Array], default: () => { return [] } },
    url: { type: [String] },
  },
  data() {
    return {
    }
  },
  methods: {
    showConfirm() {
      if (this.rows.length == 0) {
        this.$error({
          title: this.$t('error_message'),
          content: this.$t('please_choose_one_record'),
          okText: this.$t('modal_ok'),
        })
        return
      }
      let _this = this
      this.$confirm({
        title: this.$t('confirm_message'),
        content: this.$t('please_confirm_detelte_selected_records'),
        okText: this.$t('confirm_yes'),
        okType: 'danger',
        cancelText: this.$t('confirm_no'),
        onOk() {
          _this.handleOk()
        },
      })
    },
    handleOk() {
      let selectedIds = this.rows.map(item => item.id)
      axios({
        method: 'post',
        url: this.url,
        data: selectedIds,
      }).then(() => {
        if(this.callback) {
          this.callback()
        }
      })
    },
  }
}
</script>
